﻿@page "/datagrid/default-scrolling"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
 <p>This sample demonstrates the DataGrid component with the horizontal and vertical scrollbars to view the exceeded DataGrid content.</p>   
</SampleDescription>
<ActionDescription>
   <p>The DataGrid will show scrollbar when the content exceeds the element width or height. The vertical and horizontal scrollbar will be displayed based on the following criteria,</p>
   <ul><li>The vertical scrollbar appears when the total height of rows present in DataGrid exceeds its element height.</li>
       <li>The horizontal scrollbar appears when the total width of columns present in DataGrid exceeds its element width.</li>
    </ul>
    <p>The <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height'>Height </a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width'>Width </a></code> properties are used to set theDataGrid height and width respectively. The value of these properties can be numeric value, pixel(<code>px</code>) or percentage (<code>%</code>).</p>
    <p>In this demo, the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridModel%601~Height.html'>Height </a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridModel%601~Width.html'>Width </a></code> properties of theDataGrid are set to <strong><em>410</em></strong> and <strong><em>auto</em></strong> respectively. Now, the DataGrid will render with vertical scrollbar when the total height of rows exceeds its element height and horizontal scrollbar will appear when the total column width exceeds the element width.</p>
                    <p>More information on the scrolling in Blazor DataGrid can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/scrolling/'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="row">
                <SfGrid DataSource="@GridData" Height="410" Width="auto">
                    <GridColumns>
                        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
                        <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                        <GridColumn Field=@nameof(OrdersDetails.ShippedDate) HeaderText="Shipped Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="140"></GridColumn>
                        <GridColumn Field=@nameof(OrdersDetails.ShipName) HeaderText="Ship Name" Width="170"></GridColumn>
                        <GridColumn Field=@nameof(OrdersDetails.ShipAddress) HeaderText="Ship Address" Width="320"></GridColumn>
                        <GridColumn Field=@nameof(OrdersDetails.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
                        <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                    </GridColumns>
                </SfGrid>

            </div>
        </div>
    </div>

 @code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
